<!-- 自定义表单 -->
<template>
	<view class="my-form">
		<view v-for='(form,index_f) in orderData' :key='index_f' v-if='orderData.length > 0'>
			<!-- 表单详情介绍 -->
			<view class="orderInfo" v-if='form.info && showInfo=="true"'>
				<view class="topMsg" v-if='form.info.show_info == 1'>
					<image v-if='form.info.wzn_act_img' :src="imgUrl+form.info.wzn_act_img" mode="widthFix"></image>
					<view class="infoContent">
						<view class="infoName">{{form.info.order_name}}</view>
						<view class="info_item">{{form.info.order_title}}时间：{{form.info.order_starttime}} ~
							{{form.info.order_endtime}}</view>
						<view class="info_item">联系电话：{{form.info.order_tel}}</view>
						<view class="info_item">地址：{{form.info.order_address}}</view>
						<!-- <view class="info_s">{{form.info.order_title}}说明：</view> -->
					</view>
				</view>
				<mp-html :content="form.info.order_content" lazy-load scroll-table selectable use-anchor show-with-animation/>
			</view>
			<view class="dowload_file_box flex-box align-center" v-if='form.info.attachment_name'>
				<view class="dowload_file" @click="openFile(form.info.attachment_url)">
					<text class="thmeBg" :style="{
						'--color': color
					}">预览{{form.info.attachment_name}}</text>
				</view>
				<view class="dowload_file" @click="copy_text(imgUrl + form.info.attachment_url)">
					<text class="thmeBg" :style="{
						'--color': color
					}">复制附件地址</text>
				</view>
			</view>
			<view class="photoes" v-if='form.info.imgs'>
				<template v-if="form.info.imgs.length == 1">
					<image class="img_1" @click="previewImage(g,form.info.imgs)" :src="imgUrl + img" mode="aspectFill"
					  :show-menu-by-longpress='true' v-for="(img,g) in form.info.imgs" :key='g' v-if='g == 0'></image>
				</template>
				<template v-else>
					<image class="img_2" @click="previewImage(g,form.info.imgs)" :src="imgUrl + img" mode="aspectFill" 
					 :show-menu-by-longpress='true' v-for="(img,g) in form.info.imgs" :key='g'></image>
				</template>
			</view>
			<!-- 表单-->
			<view class="reserve-box">
				<view class='reserve white'>
					<view class='reserve-title'>{{form.info.order_name}}</view>
					<view class="form">
						<block v-for='(ord,index) in form.data' :key='index'>
							<!-- 1、单行文本框 -->
							<view class='text_input align-center' v-if='ord.config_type == 1 && ord.config_state == 1'>
								<text class='Required' v-if='ord.config_must == 1||ord.config_name =="用户姓名"||ord.config_name =="联系电话"'>*</text>
								<text class="isKey">{{ord.config_name}}：</text>
								<input :placeholder='ord.place?ord.place:"请输入"+ord.config_name' v-model="ord.config_content" class='form-ipt' type='text' placeholder-class="pla"></input>
							</view>
							<!--2、选择日期  3-->
							<view class='drop_select' v-if='ord.config_type == 3 && ord.config_state == 1'>
								<timepicker showType="date" @btnConfirm="btnConfirm1" :isAll="false" :index1='index' :index2='index_f' @btnCancel="btnCancel">
									<view class="picker">
										<text class='Required' v-if='ord.config_must == 1'>*</text>
										<text class="isKey">{{ord.config_name}}：</text>
										<text class="flex" :class='{isKey: ord.config_content}'>{{ ord.config_content?ord.config_content:ord.config_pla }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								 </timepicker>
							</view>

							<!-- 3、验证码 -->
							<view class='Veri_Code align-center' v-if='form.info.verification == 1 && ord.config_name == "联系电话"'>
								<view class="inputBox flex-box ">
									<text class='Required'>*</text>
									<input placeholder='请输入验证码：' type='number' v-model="form.info.verCode"></input>
								</view>
								<button class='sendCode thmeBg' :style="{'--color': color}" @click='verifCode2(index_f,form.info.order_id)' :disabled="form.info.btnDisabled">{{form.info.btnTxt}}</button>
							</view>
							<!-- 4、 选择时间-->
							<view class='drop_select' v-if='ord.config_type == 7 && ord.config_state == 1'>
								<timepicker showType="minuteToSecond" @btnConfirm="btnConfirm" :isAll="false" :index1='index' :index2='index_f'
								 id='mypicker' @btnCancel="btnCancel" ref='mypicker'>
									 <view class="picker">
										<text class='Required' v-if='ord.config_must == 1'>*</text>
										<text class="isKey">{{ord.config_name}}：</text>
										<text class="flex" :class='{isKey: ord.config_content}'>{{ ord.config_content?ord.config_content:time }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									 </view>
								</timepicker>
							</view>
							<!-- 5、选择地址 -->
							<view class='drop_select' v-if='ord.config_type == 6 && ord.config_state == 1'>
								<view class="picker" @click="showAddPicker(index,index_f)">
									<text class='Required' v-if='ord.config_must == 1'>*</text>
									<text class="isKey">{{ord.config_name}}：</text>
									<text class="flex" :class='{isKey: ord.config_content}'>{{ ord.config_content?ord.config_content:ord.pickered }}</text>
									<text class="icon-xiasanjiaoxing iconfont"></text>
								</view>
							</view>
							<!-- 6、下拉框 -->
							<view class='drop_select' v-if='ord.config_type == 2 && ord.config_state == 1' @click="showSelect(index,index_f)">
								<picker mode="selector" :range='ord.options' :data-indexf='index_f' :data-index='index' @change="selectorChange" style="width: 100%;">
									<view class="picker">
										<text class='Required' v-if='ord.config_must == 1'>*</text>
										<text class="isKey">{{ord.config_name}}：</text>
										<text class="flex" :class='{isKey: ord.config_content}'>{{ ord.config_content?ord.config_content:'请选择'+ord.config_name }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</picker>
							</view>
							<!-- 7、复选框 -->
							<view class='mulitSelect' v-if='ord.config_type == 5 && ord.config_state == 1'>
								<view>
									<text class='Required' v-if='ord.config_must == 1'>*</text>
									<text class="isKey">{{ord.config_name}}：</text>
								</view>
								<view class="checkList flex">
									<block v-for="(check,index_check) in ord.checkList" :key='index_check'>
										<view class="checkItem" @click="checkClick(index,index_f,index_check,check.checked,check.name)">
											<view class="checkIcon thmeBorder" :style="{'--color': color}" :class="{thmeBg:check.checked}">
												<text class="icon-xuanzhong iconfont"></text>
											</view>
											<text class="name">{{check.name}}</text>
										</view>
									</block>
								</view>
							</view>
							<!-- 8、单选框 -->
							<view class='singleSelect' v-if='ord.config_type == 9 && ord.config_state == 1'>
								<text class='Required' v-if='ord.config_must == 1'>*</text>
								<text class="isKey">{{ord.config_name}}：</text>
								<view class="checkList flex">
									<block v-for="(check,index_check) in ord.checkList" :key='index_check'>
										<view class="checkItem" @click="checkClick1(index,index_f,index_check,check)">
											<view class="checkIcon_" :class="{thmeBorder:ord.config_content == check}" :style="{'--color': color}">
												<text :class="ord.config_content == check?'thmeBg':'grayBg'" :style="{'--color': color}"></text>
											</view>
											<text class="name">{{check}}</text>
										</view>
									</block>
								</view>
							</view>
							<!-- 9、上传图片 -->
							<view class="uploadImg" v-if='ord.config_type == 8 && ord.config_state == 1'>
								<text class='Required' v-if='ord.config_must == 1'>*</text>
								<text class="isKey">{{ord.config_name}}：</text>
								<view class="phone-box flex-box">
									<view class="upBox relative" style="border: 1px solid #dcdada;" v-for="(img,i) in ord.imgs" :key='i'>
										<view class="delImg thmeBg" @click="del(index,index_f,i)" :style="{'--color': color}">
											<image :src="staticUrl+'/images/jh_up/delImg.png'"></image>
										</view>
										<image class="upIcon" :src="imgUrl + img" mode="aspectFit"></image>
									</view>
									<view class="upBox" v-if="ord.imgEn">
										<image class="upIcon" :src="staticUrl+'/images/jh_up/addImg.png'" @click="selectImage(index,index_f,ord.limit)"
										 mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<!-- 10、文本域 -->
							<view class='areaBox color' v-if='ord.config_type == 4 && ord.config_state == 1'>
								<text class='Required' v-if='ord.config_must == 1'>*</text>
								<text class="isKey">{{ord.config_name}}：</text>
								<textarea class="textArea" v-model="ord.config_content" @input="areaBlur($event,index,index_f)" :placeholder="ord.plac?ord.plac:'请输入内容...'" />
							</view>
							
							<!-- 11、 选择时间 (可配置类型)-->
							<view class='drop_select' v-if='ord.config_type == 10 && ord.config_state == 1'>
								<timepicker :showType="ord.dateTimeType" @btnConfirm="btnConfirm2" :isAll="false" :index1='index' :index2='index_f'
								 id='mypicker' @btnCancel="btnCancel" ref='mypicker' style="width: 100%;height: 100%;">
									<view class="picker">
										<text class='Required' v-if='ord.config_must == 1'>*</text>
										<text class="isKey">{{ord.config_name}}：</text>
										<text class="flex" :class='{isKey: ord.config_content}'>{{ ord.config_content?ord.config_content:'请选择'+ord.config_name }}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</timepicker>
							</view>
						</block>
						<!-- <text class="wrong">{{form.info.wrongTxt}}</text> -->
						<button class='reserveNow' form-type='submit' v-if='form.info.order_id == "2147" && (form.station == 0 || !form.station)'>暂无{{form.info.order_title?form.info.order_title:'申请'}}权限</button>
						<button class='reserveNow thmeBg' v-else :style="{'--color': color}" form-type='submit' @click="reserveNow(index_f,form.info.order_id)">{{form.info.order_title?'立即'+form.info.order_title:'立即提交'}}</button>
					</view>
				</view>
			</view>
		</view>
		<view class="mask success-img-box" v-if='showSuccess' 
		:style="{'padding-top':navHeight+System.statusBarHeight+'px'}">
			<image @click="toStation" class="success-img" :src="staticUrl+'/images/station/be_station.png'" mode="widthFix"></image>
		</view>
		<!-- 选择地址组件（不能放在循环里面） -->
		<mpvue-city-picker :shixian2='shixian2' ref="mpvueCityPicker_" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"  @onCancel='onCancel'></mpvue-city-picker>	

		<showModel @cancelFunc='showModal = false' v-if='showModal' type='2'></showModel>
		<empty v-if='noData' type='1' cat='4' :msg='msg'></empty>
		<showModel @cancelFunc='showModal1=false' v-if='showModal1' type='99' title='提交成功!' :msg='modelTitle'
		 @certain='toUrl("/pages/reserve/myRreserve")' btn1='确定' btn2='前往查看'></showModel>
	</view>
</template>
<script>
	var date = new Date(),that,timer = null;
	var mon = date.getMonth() + 1;
	if (mon < 10)
		mon = "0" + mon
	var day = date.getDate();
	if (day < 10)
		day = "0" + day
	var today = date.getFullYear() + "-" + mon + "-" + day;
	var H = date.getHours()
	var m = date.getMinutes()
	if (H < 10)
		H = '0' + H
	if (m < 10)
	    m = '0' + m
	var time = H + ':' + m; // 当前时间
	import {mapState} from 'vuex';
	import mpvueCityPicker from './mpvue-citypicker/mpvueCityPicker.vue' 
	import timepicker from "./time-picker.vue"
	import '@/js_sdk/ican_H5Api/ican-H5Api'
	export default {
		props: ['ids','info','barTitle'], //ids:表单id列表,有可能同时出现多个表单的情况  info:是否显示表单介绍  barTitle:是否修改页面标题 1修改
		components:{
			mpvueCityPicker,
			timepicker,
		},
		data() {
			return {
				color: getApp().globalData.color,
				vid: '',
				bid: uni.getStorageSync('bid'),
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl,
				showModal: false,
				latitude: 0, //纬度
				longitude: 0, //经度
				inputValue: today,
				shixian: false,
				year:date.getFullYear(),
				month:mon,
				day:day,
				indexs:[],
				today: today, // 出生日期默认值	
				orderData: [], // 表单结构
				time:time, // 当前时间 
				minute:3,
				hour:3,
				shixian1:false,
				cityPickerValueDefault: [0, 0, 1],// 默认选择地址
				shixian2:false,
				loadingNow: false, // 图片正在上传
				list: this.ids,
				showInfo: this.info, // 是否显示表单详情
				noData: false,
				msg:'',
				showSuccess: false,
				
				showModal1: false,
				modelTitle: '您已成功提交，请耐心等待审核结果！'
			}
		},
		created(){
			that = this;
			that.getList();
			
		},
		methods: {
			toStation(){
				that.showSuccess = false;
				that.toUrl('/moneyPage/station/index')
			},
			openFile(url){
				// #ifdef H5
				window.location.href = that.imgUrl + url
				// #endif
				// #ifndef H5
				uni.downloadFile({
				  url: that.imgUrl + url,
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    })
				  }
				})
				// #endif
			},
			copy_text:function(copyData){
				uni.setClipboardData({
					data: copyData,
					success: function () {
						uni.showToast({
							title:"复制成功！",
							icon:"success"
						})
					}
				});
			},
			getList(){
				this.list.forEach((item, index) => {
					this.getFormStr(item.order_id)
				})
			},
			btnConfirm(e){
				var indexf = e.indexf;
				var index = e.index;
				this.time = e.key;
				this.orderData[indexf].data[index].config_content = e.key;
			},
			btnConfirm1(e){
				var indexf = e.indexf;
				var index = e.index;
				this.today = e.key;
				this.orderData[indexf].data[index].config_content = e.key;
			},
			btnConfirm2(e){
				var indexf = e.indexf;
				var index = e.index;
				this.orderData[indexf].data[index].config_content = e.key;
			},
			btnCancel(e){
				console.log(e)
			},
			dateChange(e){
				var DATE = e.target.value;
				this.orderData[index_f].data[index].config_content = DATE;
			},
			timeChange(e){
				var index = e.target.dataset.index;
				var index_f = e.target.dataset.indexf;
				var TIME = e.target.value;
				this.orderData[index_f].data[index].config_content = TIME;
			},
			showPicker: function(sx,index,index_f) { // 记录当前表单序列和当前表单项系列 
				this.shixian = sx;
				this.indexs = [index,index_f];
			},
			showPicker1: function(sx,index,index_f) {
				this.shixian1 = sx;
				this.indexs = [index,index_f];			
			},
			quxiaobutton: function() {
				this.shixian = false;
			},
			quxiaobutton1: function() {
				this.shixian1 = false;
			},
			quedingbutton: function(y, m, d) {
				this.shixian = false;
				this.inputValue = y + "-" + m + "-" + d;
				this.year = y;
				this.month = m;
				this.day = d;
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = this.inputValue;
			},
			quedingbutton1: function(h, m) {
				this.shixian1 = false;
				this.hour = h;
				this.minute = m;	
				if(h<9)
					h = '0'+ h
				if(m<9)
					m = '0'+ m
				this.time = h + ":" + m ;
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = this.time;
			},
			bindDateChange: function(event) {
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = event.target.value;
			},
			// 三级联动选择
			showAddPicker(index,index_f) {
				this.shixian2 = true;
				this.indexs = [index,index_f];
			},
			onCancel(){
				this.shixian2 = false;
			},
			onConfirm(e) {
				this.shixian2 = false;
				var add = e.label.replace(/-/g, '');
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = add;
			},
				// 下拉框
			showSelect(index,index_f){ //下拉框显示
				this.orderData[index_f].data[index].showSelect_ = true;
				this.indexs = [index,index_f];
			},
			chooseSel(index,index_f,option){ //下拉框选择
				this.orderData[index_f].data[index].showSelect_ = false;
				if(option){
					this.orderData[index_f].data[index].config_content = option;
				}	
			},
			selectorChange(e){
				var index_f = e.target.dataset.indexf;
				var index = e.target.dataset.index;
				var selector = e.target.value;
				this.orderData[index_f].data[index].config_content = this.orderData[index_f].data[index].options[selector];
			},
				// 复选框
			checkClick(index,index_f,index_check,checked,name){// 复选框选择 2020.01.09 update
				var that = this;
				var chklist = that.orderData[index_f].data[index];
				if(chklist.config_content && typeof chklist.config_content != 'object'){
					   chklist.config_content = chklist.config_content.split(',')
				}
				if(chklist.config_content == ''){
					chklist.config_content = []
				}
				that.orderData[index_f].data[index].checkList[index_check].checked = !checked;
				if (checked) { // 取消选择
					chklist.config_content.forEach((chk, index_c) => {
						if (chk == name) {
							that.orderData[index_f].data[index].config_content.splice(index_c, 1)
						}
					})
				} else { // 新增选择
					that.orderData[index_f].data[index].config_content.splice(index_check, 0, name);
				}
			},
			//单选
			checkClick1(index,index_f,index_check,name){//单选
				this.orderData[index_f].data[index].config_content = name;
			},
				// 文本域
			areaBlur(e,index,index_f){
				this.orderData[index_f].data[index].config_content = e.detail.value;
			},
			// 上传图片
			//选择图片
			selectImage(index,index_f,limit){
				var that = this;
				uni.chooseImage({
					count: limit,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType:['album','camera'],
					success: (res) => {
						uni.showLoading({
							title:'图片上传中'
						})
						that.loadingNow = true; // 图片正在上传
						res.tempFilePaths.forEach((tempFilePath,tempIndex)=>{
							that.$common.uploadFile('/zzjApp/uploade?bid='+that.bid,tempFilePath).then(res2=>{
								var data = res2;
								if(typeof res2 == 'string'){
									data = JSON.parse(data)
								}
								if(data.errcode == 100){
									var imgItem;
									imgItem = data.url;
									imgItem = imgItem.substring(22,imgItem.length);
									if(that.orderData[index_f].data[index].imgs.length < limit){
										that.orderData[index_f].data[index].imgs.push(imgItem)
									}
									if(that.orderData[index_f].data[index].imgs.length >= limit){
										that.orderData[index_f].data[index].imgEn = false;
									}
									that.orderData = [].concat(that.orderData)
								}else{
									uni.showToast({
										icon: 'none',
										title: data.msg+'!',
										duration: 2000
									})
								}
								uni.hideLoading();
								that.loadingNow = false;
							})	
						})
					}
				})
			},
			del(index,index_f,i){ // 删除图片
				this.orderData[index_f].data[index].imgs.splice(i,1);
				this.orderData[index_f].data[index].imgEn = true
			},
			getFormStr(ordId) {// 获取自定义表单结构
				that.$http.get({
					url: '/SRA_CustomerForm/customForm',
					data: {
						VeriCode: this.bid,
						ordId: ordId,
						v_id: uni.getStorageSync("vid")
					}
				}).then(res => {
					if (res.code == 100) {
						var obj = {};
						if(res.data.config){
							obj.data = res.data.config;
							obj.data.forEach((item,index)=>{
								if(item.config_type == 1){ // 文本框
									if(item.config_content){
										item.place = item.config_content;
										item.config_content = '';
									}
								}
								if(item.config_type == 2){ // 下拉框
									item.showSelect_ = false;
									item.options = item.config_content.split('|');
									item.config_content = ''
								}
								if(item.config_type == 6){ // 选择地址
									item.pickered = item.config_content?item.config_content:'请选择区县';
									item.config_content = '';
								}
								if(item.config_type == 7 && !item.config_content){ // 选择时间
									item.config_content = that.time;
								}
								if(item.config_type == 3){ // 选择日期
									// item.config_content = that.inputValue;
									item.config_pla = '请选择'
									if(item.config_content){
										item.config_pla = item.config_content
										item.config_content = ''
									}
									
								}
								if(item.config_type == 4 && item.config_content){ // 下拉框
									item.plac = item.config_content;
									item.config_content = '';
								}
								if(item.config_type == 8){ // 上传图片
									item.config_content = '';
									item.imgs = [];
									item.imgEn = true;
									item.limit = item.limit?parseInt(item.limit):1
								}
								if(item.config_type == 5 && item.config_content){ // 复选框
									item.checkList = item.config_content.split('|');
									item.checkList.forEach((check,index_)=>{
										var check_ ={
											checked: false,
											name: check
										}
										item.config_content = [];
										item.checkList[index_] = check_;
									})
								}
								if(item.config_type == 9 && item.config_content){ // 单选框
									item.checkList = item.config_content.split('|');
									// item.config_content = item.checkList[0];
								}
							})
						}
						obj.station = res.data.station
						if(res.data.ordInfo.order_content){
							res.data.ordInfo.order_content = that.$common.richTxt(res.data.ordInfo.order_content).html
						}
						obj.info = res.data.ordInfo;
						if(res.data.ordInfo.order_name){
							that.$emit('title',res.data.ordInfo.order_name)
						}
						if(res.data.ordInfo.imgs){
							obj.info.imgs = obj.info.imgs.split(',')
						}
						obj.info.verCode = '';
						// obj.info.wrongTxt = '';
						obj.info.btnTxt = '发送验证码';
						obj.info.btnDisabled = false;
						that.orderData.push(obj);
						if(that.barTitle == 1){
							uni.setNavigationBarTitle({
								title: obj.info.order_name?obj.info.order_name:'信息提交'
							})
						}
						that.v++;
					}else{
						that.noData = true
						that.msg = res.data
					}
					console.log(that.orderData)
				})
			},
			verifCode2: function(index, orderId) { // 发送验证码
				var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 手机号正则检验
				var phoneNumber = that.orderData[index].data[1].config_content; // 手机号
				
				if (phoneNumber == "") return this.$Toast('联系电话不能为空！') 
				if (!phoneReg.test(phoneNumber) && phoneNumber != "") return this.$Toast('手机号输入有误！')
				if (that.orderData[index].info.btnDisabled) return
				that.$http.post({
					url: '/SRA_CustomerForm/verification_code',
					data: {
						ordId: orderId,
						phone: phoneNumber,
					}
				}).then(res => {
					if (res.code == 1000) { // 提交成功
						var cutdown = 60;
						timer = setInterval(function() {
							if (cutdown > 0) {
								cutdown--;
								that.orderData[index].info.btnTxt = "重新发送(" + cutdown + ")";
								that.orderData[index].info.btnDisabled = true;
							} else {
								clearInterval(timer);
								that.orderData[index].info.btnTxt = "发送验证码";
								that.orderData[index].info.btnDisabled = false;
							}
						}, 1000)
					}
					if (res.code == 1001) {
						uni.showToast({
							title: res.cont,
							icon: 'none'
						})
					}
				})
			},
			reserveNow: function(index, orderId) { // 自定义表单提交
				let vid = uni.getStorageSync("vid");
				if (!vid) {
					that.showModal = true;
					return
				}
				if(that.loadingNow) // 图片正在上传
					return
				var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 手机号正则检验
				var phoneNumber = that.orderData[index].data[1].config_content; // 手机号
				if (!phoneReg.test(phoneNumber) && phoneNumber != "") return this.$Toast('手机号输入有误！');
				var tokend = this.bid;
				var code = that.orderData[index].info.verCode;
				var params = {
					'VeriCode': tokend,
					'ordId': orderId,
					'jsCode': vid,
					'verification': code
				}
				let temp = that.orderData[index].data
				for(var index1 = 0;index1 < temp.length;index1++){
					var item = temp[index1];
					if (typeof item.config_content == 'object') { // 复选
					    item.config_content = item.config_content.join(",");
					}
					if(item.config_type == 8){ // 上传图片
						item.config_content = item.imgs.join(",");
					}
					if ((item.config_must == 1 || item.config_name == '用户姓名' || item.config_name == '联系电话') && item.config_content == '') {
						uni.showToast({
						title: item.config_name + '不能为空！',
							icon: 'none'
						})
					    return false;
					}
					var name = 'name' + index1;
					params[name] = item.config_content;
				}
				uni.showLoading({
					title:'请稍等 ~'
				})
			
				that.$http.post({
					url: '/zzj_singleSaleApi/addFrom',
					data: params
				}).then(res => {
					uni.hideLoading()
					if (res.code == 100) { // 提交成功
						that.orderData[index].data.forEach((item, index2) => {
							that.orderData[index].data[index2].config_content = '';
							that.orderData[index].data[index2].imgs = [];
							that.orderData[index].info.verCode = '';
							that.orderData[index].info.btnTxt = "发送验证码";
							that.orderData[index].info.btnDisabled = true;
						})
						clearInterval(timer);
						if(orderId == '2147'){// 申请站长成功
							that.showSuccess = true
						}else{
							that.modelTitle = res.data
							that.showModal1 = true
						}
					}
					if (res.code == 101) {
						uni.showToast({
							title: res.data,
							icon: 'none'
						})
						// that.orderData[index].info.wrongTxt = res.data;
					}
				})
			},
			previewImage(i, imgArry) {
				if (imgArry) {
					let arr = [];
					for (let i in imgArry) {
						arr.push(that.imgUrl + imgArry[i])
					}
					uni.previewImage({
						current: i,
						urls: arr,
						indicator: "number",
						loop: true
					})
				}
			}
		},
		computed:{
			...mapState(['tabTitle','color','city','navHeight','System','vid','share']),
		},
	}
</script>
<style scoped lang="scss">
.my-form{
	.orderInfo{
		background: white;
		.topMsg{
			padding: 0 30rpx;
			.infoContent{
				padding: 10upx 0 30upx;
				.infoName{
					font-size: 36upx;
					color: #333;
					font-weight: bold;
					line-height: 90upx;
					border-bottom: 1px solid #eeeeeeee;
				}
				.info_item{
					font-size: 24upx;
					margin: 10upx 0;
				}
				.info_s{
					margin: 20upx 0 10upx;
					padding-top: 10upx;
					border-top: 1px solid #eeeeee;
				}
			}
		}
		table{
			width: 100%!important;
		}
	}
	// 下载
	.dowload_file_box{
		padding: 20rpx 24rpx;
		.dowload_file{
			margin-right: 20rpx;
			text{
				display: inline-block;
				color: white;
				padding: 0 28rpx;
				line-height: 54rpx;
				text-decoration: underline;
				border-radius: 40rpx;
			}
		}
	}
	
	
	// 图集
	.photoes{
		overflow-x: auto;
		white-space: nowrap;
		margin-top: 20rpx;
		padding: 0 $uni-page-space;
		.img_1{
			width: 100%;
			height: 300rpx;
			border-radius: 8rpx;
		}
		.img_2{
			width: calc(25% - 8rpx);
			margin-right: 10rpx;
			height: calc(25vw - 10rpx);
			border-radius: 8rpx;
			display: inline-block;
		}
	}
	
	// 申请站长成功
	.success-img-box{
		min-height: 100vh;
		overflow-y: auto;
		background-color: #FFFFFF;
		.success-img{
			width: 100vw;
		}
	}
	
	/* 预约试听 */
	.reserve-box{
		padding: 30rpx;
		.reserve {
			border-radius: 16upx;
			padding: 30upx 30upx 40upx;
			box-sizing: border-box;
			background: white;
			box-shadow: 1px 1px 9px 0px rgba(0, 0, 0, 0.12);
			.reserve-title {
				color: #333333;
				font-size: 36rpx;
				position: relative;
				text-align: center;
			}
			.reserve-title:before {
				position: absolute;
				content: "";
				width: 40upx;
				height: 2px;
				top: calc(100% + 10px);
				left: 50%;
				transform: translateX(-50%);
				background: #333333;
			}
			.form {
				margin-top: 68upx;
				.Required {
					color: #FE1112!important;
					font-size: 30upx;
					margin-right: 4upx;
					padding: 0;
					display: inline-block;
					vertical-align: middle;
					background: none;
				}
				.isKey{
					color: #000000;
				}
				>view{
					margin-bottom: 30rpx;
				}
				input {
					height: 100%;
					padding-left: 10upx;
					font-size: 26rpx;
					color: #333333;
				}
				.icon-xiasanjiaoxing{
					color: #999999;
					font-size: 28rpx;
				}
				// 1、单行文本框
				.text_input{
					background: #F2F2F2;
					border-radius: 10rpx;
					line-height: 88rpx;
					height: 88rpx;
					display: flex;
					padding: 0 20rpx;
					.form-ipt{
						border: none;
						outline: none;
						flex: 1;
						background: none;
						font-size: 24rpx;
					}
					.pla{
						color: #999999;
					}
				}
				
				// 3、验证码
				.Veri_Code {
					background: white;
					height: 88rpx;
					display: flex;
					.inputBox{
						background: #F2F2F2;
						height: 90rpx;
						border-radius: 10rpx;
						padding-left: 20rpx;
						align-items: center;
					}
					/* 发送验证码 */
					.sendCode {
						margin-left: 20rpx;
						border-radius: 10rpx;
						outline: none;
						box-sizing: border-box;
						color: white;
						line-height: 88rpx;
						font-size: 28rpx;
						width: 250rpx
					}
				}
				
				// 2、选择日期  4、选择时间  5、选择地址 6、下拉框 11、选择时间 (可配置类型)
				.drop_select{
					border: 1px solid #D8D8D8;
					height: 88rpx;
					display: flex;
					border-radius: 10rpx;
					.picker{
						width: 100%;
						height: 88rpx;
						display: flex;
						align-items: center;
						padding: 0 20rpx;
						.flex{
							color: #999999;
						}
						.isKey{
							color: #000000;
						}
					}
				}
				// 7、复选框
				.mulitSelect{
					display: flex;
					.checkList{
						display: flex;
						flex-wrap: wrap;
						margin-bottom: -14rpx;
						.checkItem {
							margin-right: 20rpx;
							margin-bottom: 14rpx;
							display: flex;
							align-items: center;
							.checkIcon{
								border-radius: 6rpx;
								width: 30rpx;
								height: 30rpx;
								display: flex;
								align-items: center;
								.icon-xuanzhong{
									font-size: 26rpx;
								}
							}
							.name{
								color: #666666;
								margin-left: 8rpx;
							}
						}
					}
				}
				// 8、单选框
				.singleSelect{
					display: flex;
					.checkList{
						display: flex;
						flex-wrap: wrap;
						margin-bottom: -14rpx;
						.checkItem {
							margin-right: 20rpx;
							margin-bottom: 14rpx;
							display: flex;
							align-items: center;
							.checkIcon_{
								border-radius: 50%;
								width: 32upx;
								height: 32upx;
								display: inline-block;
								box-sizing: border-box;
								border: 1px solid #D8D8D8;
								position: relative;
								text{
									width: 16upx;
									height: 16upx;
									border-radius: 50%;
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%,-50%);
								}
								.grayBg{background: #D8D8D8;}
							}
							.name{
								color: #666666;
								margin-left: 6rpx
							}
						}
					}
				}
				
				// 9、上传图片
				.uploadImg{
					.phone-box{
						flex-wrap: wrap;
						margin-top: 20rpx;
						margin-bottom: -20rpx;
						.upBox{
							width: 196upx;
							height: 196upx;
							border-radius: 10rpx;
							position: relative;
							&:nth-of-type(3n-1){
								margin: 0 20rpx;
							}
							margin-bottom: 20rpx;
							.upIcon{
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
							}
							.delImg{
								position: absolute;
								z-index: 22;
								width: 32rpx;
								height: 32rpx;
								top: -16rpx;
								right: -16rpx;
								border-radius: 50%;
								image{
									width: 100%;
									height: 100%;
								}
							}
						}
						
					}
				}
				
				// 10、文本域
				.areaBox{
					.textArea{
						background-color: #f5f5f5;
						padding: 20rpx;
						font-size: 24rpx;
						height: 196rpx;
						z-index:0!important;
						color: rgb(51, 51, 51);
						border-radius: 10rpx;
						margin-top: 10rpx;
					}
				}
				
				.wrong {
					color: #FE1112;
					padding-left: 16rpx;
					line-height: 40upx;
					margin-bottom: 20upx;
				}
				/* 立即预约 */
				.reserveNow {
					font-size: 32upx;
					color: white;
					height: 88upx;
					line-height: 88upx;
					border-radius: 44upx;
					border: none;
					outline: none;
					position: relative;
					background-color: #d8d8d8;
				}
			}
			
		}
	}

	
}
</style>
